<template>
	<view :class="themeName">
		<view class="video-detail">
			<scroll-view scroll-y="true" class="contentbox" @scrolltolower="scrolltolower">
				<video id="myVideo" class="head-video m-b-20" :src="msglist.path"></video>
				<view class="specks m-b-10">
					<view class="flex2">
						<image class="img m-r-20" src="../../static/a1.png" mode=""></image>
						<view>
							<view class="md bold black m-b-10">{{ msglist.name }}</view>
							<view class="m-b-10"><rich-text :nodes="msglist.content"></rich-text></view>
							<view class="normal lighter">{{ msglist.time }}</view>
						</view>
					</view>
				</view>
				<view class="specks">
					<view class="md bold m-b-20">评价信息</view>
					<view class="inputs flex col-between m-b-20">
						<image class="heading m-r-20" src="../../static/a2.png" mode=""></image>
						<input v-model="speck" placeholder="发一条友善的评论~" type="text" />
						<view class="fabu m-l-20" @click="fabu">发布</view>
					</view>
					<view class="inputs flex2 videos-container m-t-30" v-for="(item, index) in lists" :key="index">
						<image class="heading m-r-20" :src="item.avatar" mode=""></image>
						<view>
							<view class="m-b-10 sm lighter">{{item.nickname}}</view>
							<view class="md bold black m-b-10">{{item.content}}</view>
							<view class="normal lighter flex">
								<view class="m-r-60">{{item.time}}</view>
								<view class="flex m-r-32" @click="drop(item.id,1,index,item.click)">
									<image v-if="item.click == 1" class="icons m-r-10" src="../../static/a3b.png" mode=""></image>
									<image v-else class="icons m-r-10" src="../../static/a3.png" mode=""></image>
									<view>{{item.top}}</view>
								</view>
								<view class="flex" @click="drop(item.id,2,index,item.click)">
									<image v-if="item.click == 2" class="icons m-r-10" src="../../static/a4b.png" mode=""></image>
									<image v-else class="icons m-r-10" src="../../static/a4.png" mode=""></image>
									<view>{{item.lower}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>

			<view style="height: 175rpx"></view>
			<view class="base">
				<view class="base-back flex row-between">
					<view class="b1 flex" @click="shoucang">
						<image v-if="!msglist.is_sc" class="xin m-r-20" src="../../static/a5.png" mode=""></image>
						<image v-else class="xin m-r-20" src="../../static/a6.png" mode=""></image>
						<view style="color: #9a9a9a">收藏</view>
					</view>
					<view class="b1" @click="play">开始播放</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { jzjx,jzpl,jzplck,jzscck,jztopck } from '@/api/store.js';
export default {
	data() {
		return {
			id:'',
			videoContext: '',
			msglist: {},
			page: 1,
			limit: 10,
			length: true,
			lists: [],
			speck:''
		};
	},
	methods: {
		// this.videoContext.play();  //播放
		// this.videoContext.pause(); //暂停
		play() {
			this.videoContext.play();
		},
		// 上拉
		scrolltolower() {
			console.log('触底')
			if (this.length) {
				this.page++
				this.getList();
			}
		},
		// 获取评价列表  jzpl
		getList(){
			jzpl({
				id: this.id,
				page_no: this.page,
				page_size: this.limit
			})
				.then((res) => {
					this.length = res.lists.length == this.limit;
					this.lists.push(...res.lists);
				})
				.catch((err) => {
					console.log(err)
				});
		},
		// 获取详情
		initMsg(id) {
			return new Promise((resolve, reject) => {
				jzjx({
					id: id
				})
					.then((data) => {
						// console.log(data)
						this.msglist = data;
						this.page = 1;
						this.lists = [];
						this.getList();
						resolve(data);
					})
					.catch((err) => {
						reject(err);
					});
			});
		},
		// 评价视频
		fabu(){
			if(!this.speck){
				this.$toast({
					title: '请输入内容'
				})
				return
			}
			jzplck({
				jid: this.id,
				content: this.speck
			}).then((res) => {
				this.$toast({
					title: '评论成功'
				})
				this.speck = '';
				this.page = 1;
				this.lists = [];
				this.getList()
			}).catch((err) => {
				console.log(err)
			});
		},
		// 收藏
		shoucang(){
			jzscck({
				jz_id: this.id
			}).then((res) => {
				// console.log(res)
				this.$toast({
					title: '操作成功'
				})
				this.initMsg(this.id);
			}).catch((err) => {
				console.log(err)
			});
		},
		// 点击评论
		drop(id,type,index,stu){
			let that = this;
			if(stu!=0){
				return
			}
			jztopck({
				pl_id: id,
				top:type
			}).then((res) => {
				// console.log(res)
				if(type==1){
					that.lists[index].top = Number(that.lists[index].top) + 1;
				}else if(type == 2){
					that.lists[index].lower = Number(that.lists[index].lower) + 1;
				}
				that.lists[index].click = type;
				
			}).catch((err) => {
				console.log(err)
			});
		}
	},
	onLoad() {
		const options = this.$Route.query;
		console.log(options);
		this.videoContext = uni.createVideoContext('myVideo'); //创建视频实例指向video
		this.videoContext.play();
		this.id = options.id;
		this.initMsg(options.id);
	}
};
</script>

<style lang="scss">
.video-detail {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	.contentbox {
		flex: 1;
		overflow: hidden;
	}

	.head-video {
		width: 100%;
	}

	.specks {
		width: 100%;
		background-color: #fff;
		padding: 25rpx 20rpx;

		.img {
			width: 40rpx;
			height: 40rpx;
		}

		.inputs {
			.heading {
				width: 45rpx;
				height: 45rpx;
				border-radius: 50%;
			}
			input {
				flex: 1;
				border: 1px solid #eee;
				border-radius: 20rpx;
				padding: 10rpx 25rpx;
				font-size: 22rpx;
			}
			.fabu {
				background-color: #3b69ed;
				width: 75rpx;
				height: 45rpx;
				text-align: center;
				color: #fff;
				border-radius: 15rpx;
				font-size: 22rpx;
				line-height: 45rpx;
			}
			.icons {
				width: 22rpx;
				height: 20rpx;
			}
		}
	}

	.base {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		height: 170rpx;

		.base-back {
			width: 680rpx;
			height: 80rpx;
			line-height: 80rpx;
			margin: 50rpx 35rpx 40rpx 35rpx;
			background: url('https://s11.ax1x.com/2023/12/18/piIihJ1.png') no-repeat;
			background-size: 100% 100%;
			text-align: center;
			padding: 0 112rpx;
			color: #fff;

			.xin {
				width: 35rpx;
				height: 32rpx;
			}
		}
	}
}
</style>
